﻿@layout IframeLayout
@namespace MudBlazor.Docs.Examples
@page "/iframe/docs/examples/drawer/persistent"


<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="@open" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-16 px-16">
        <MudContainer Class="mt-6">
            <MudAlert Severity="Severity.Success" Class="mt-16">Text inside MudContainer</MudAlert>
        </MudContainer>
    </MudMainContent>
</MudLayout>


@code{
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}
